Add Charts into Our React App with Nivo — Bullet and Calendar Charts

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Bullet Chart

We can add bullet charts into our React app with Nivo.

First, we have to install the @nivo/bullet package by running:

npm i @nivo/bullet

Then, we can write:

import React from "react";
import { ResponsiveBullet } from "@nivo/bullet";

const data = [
  {
    id: "temp.",
    ranges: [36, 90, 12, 0, 140],
    measures: [24],
    markers: [140]
  },
  {
    id: "revenue",
    ranges: [2, 1, 3, 0, 9],
    measures: [5],
    markers: [8.804309547018528, 7.61823016825187]
  }
];

const MyResponsiveBullet = ({ data }) => (
  <ResponsiveBullet
    data={data}
    margin={{ top: 50, right: 90, bottom: 50, left: 90 }}
    spacing={46}
    titleAlign="start"
    titleOffsetX={-70}
    measureSize={0.2}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 150 }}>
      <MyResponsiveBullet data={data} />
    </div>
  );
}

to add the bullet chart.

The data array has the data that we want to render in the bullet chart.

ranges have the segment lengths.

measures have the measure values.

markers have the numbers with their own markers.

We render the chart with the ResponsiveBullet component.

margin has the margins.

spacing has the spacing of the values.

titleAlign has the title position.

measureSize have the measure sizes.

We set the width and height of the div in App so that the bullet chart will be rendered.

Calendar Charts

We can add calendar charts into our React app with Nivo.

First, we have to install the @nivo/calendar package by running:

npm i @nivo/calendar

Then we write:

import React from "react";
import { ResponsiveCalendar } from "@nivo/calendar";

const data = [
  {
    day: "2015-07-22",
    value: 284
  },
  {
    day: "2017-11-28",
    value: 219
  },
  {
    day: "2016-10-06",
    value: 12
  }
];

const MyResponsiveCalendar = ({ data }) => (
  <ResponsiveCalendar
    data={data}
    from="2015-03-01"
    to="2016-07-12"
    emptyColor="#eeeeee"
    colors={["#61cdbb", "#97e3d5", "#e8c1a0", "#f47560"]}
    margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
    yearSpacing={40}
    monthBorderColor="#ffffff"
    dayBorderWidth={2}
    dayBorderColor="#ffffff"
    legends={[
      {
        anchor: "bottom-right",
        direction: "row",
        translateY: 36,
        itemCount: 4,
        itemWidth: 42,
        itemHeight: 36,
        itemsSpacing: 14,
        itemDirection: "right-to-left"
      }
    ]}
  />
);
export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveCalendar data={data} />
    </div>
  );
}

We have the day and value in the data array that we render with the ResponsiveCalendar component.

To render them, we pass them into the data prop to render them.

from and to restricts the date range we render.

emptyColor has the color of the empty squares.

colors have the color of the filled squares.

margin has the margins.

yearSpacing has the calendar year rectangle spacing in pixels.

monthBorderCooor and dayBorderColor have the border colors.

legends has the legend settings.

We can set the spacing, width, and height of the legend text.

Conclusion

We can render bullet and calendar charts in our React app with Nivo.